import React from "react"
import tabStyle from "./slide.module.css"
import { Mvvideo, Getmv, Topmv } from "../api/index"
import { Tabs, WhiteSpace } from 'antd-mobile';
import { withRouter } from "react-router-dom"
const tabs = [
    { title: '推荐' },
    { title: 'MV' },
];
class TabExample extends React.Component {
    constructor() {
        super()
        this.state = {
            mvArr: [],
            topmv: [],
            mvlike:false
        }
    }
    componentWillMount() {
        //获取MV的id
        Mvvideo()
            .then(body => body.json())
            .then(res => {
                let { data } = res
                this.setState({
                    idArr: data.map(item => item.id)
                })
                // console.log(this.state.idArr)
                //将id作为参数传给Getmv(id)，以获取到MV的数据并返回
                const _this = this
                _this.state.idArr.forEach(function (item) {
                    Getmv(item)
                        .then(body => body.json())
                        .then(res => {
                            //将返回的数据赋值给state.mvArr,并更新sate
                            _this.state.mvArr.push(res)
                            _this.setState({})
                            
                        })
                })
            })
    }
    componentDidMount() {
        Topmv()
            .then(body => body.json())
            .then(res => {
                this.setState({
                    topmv: res.data
                })
            })
    }

    jump(id) {      
        this.props.history.push('/jumpmv?id=' + id)
    }
    changelike(){
      this.setState({
          mvlike:!this.state.mvlike
      })
    }
    render() {
        return (
            <div>
                <WhiteSpace />
                <Tabs tabs={tabs} initialPage={0} animated={false} useOnPan={false}>
                    <div style={{ height: '100%', backgroundColor: '#fff' }}>
                        {this.state.mvArr.map((item, index) => {
                            // let _this=this
                            return (
                                <div key={index} className={tabStyle.mvbox}>
                                    <video src={item.data.brs[240]} controls preload="auto" style={{ width: "100%", height: "220px" }}></video>
                                    <div className={tabStyle.mvdesc}>
                                        <div><b>{item.data.briefDesc}</b></div>
                                        <div>{"发布时间:" + item.data.publishTime}</div>
                                    </div>
                                    <div className={tabStyle.mvshare}>
                                        <div className={tabStyle.singer}>
                                            <img src={require('../../../static/img/singer.png')} style={{ width: "30px", height: "30px"}} alt="" />
                                            <span style={{ fontSize: "15px", paddingLeft: "8px",alignSelf:"center"}}><b>{item.data.artistName}</b></span>
                                        </div>
                                        <div className={tabStyle.more}>
                                            <div className={tabStyle.countBox}>
                                                <div className={tabStyle.count}><b>{item.data.likeCount}</b></div>                                               
                                                <img src={require(this.state.mvlike?"../../../static/img/like1.png":"../../../static/img/like2.png")} style={{ width: "30px", height: "30px",display:"block"}} onClick={this.changelike.bind(this)} alt=""/>
                                            </div>
                                            <div className={tabStyle.countBox}>
                                                <div className={tabStyle.count}><b>{item.data.commentCount}</b></div>
                                                <img src={require('../../../static/img/comment.png')} style={{ width: "30px", height: "30px" }} alt="" />
                                            </div>
                                            <img src={require('../../../static/img/more.png')} style={{ width: "30px", height: "30px" }} alt="" />
                                        </div>

                                    </div>
                                </div>
                            )
                        })}
                    </div>
                    <div style={{ height: '100%', backgroundColor: '#fff' }}>
                        <div className={tabStyle.mvmore}>
                            <div style={{display:"flex"}}>
                                <img src={require('../../../static/img/MV.png')} style={{ width: '25px', height: '25px' }} alt="" />
                                <b style={{ fontSize: "20px",alignSelf:"center"}}>精选</b>
                            </div>
                            <div>
                                <img src={require('../../../static/img/moremv.png')} style={{ width: '25px', height: '25px' }} alt="" />
                            </div>
                        </div>
                        <div className={tabStyle.topmvbox} style={{ display: 'flex', flexWrap: "wrap", height: '100%', backgroundColor: '#fff' }}>
                            {this.state.topmv.map((item, index) => {
                                return (
                                    <div key={index} className={tabStyle.topmv} onClick={this.jump.bind(this, item.id)}>
                                        <img src={item.cover} alt="" style={{ width: "150px", height: "150px" }} /><br />
                                        <span><b>{item.name}</b></span><br />
                                        <span>{item.artistName}</span>
                                    </div>
                                )
                            })}
                        </div>
                    </div>                   
                </Tabs>
                <WhiteSpace />
            </div >
        )
    }
}
export default withRouter(TabExample)